<template>
    <view class="page">
        <view class="tab">
            <view class="item" :class="{ actived: tabIndex == i }" v-for="(item, i) in tab" :key="item.name"
                @click="change(i)">
                <div class="title">{{ item.name }}</div>
                <view class="gap" v-if="tabIndex == i"></view>
            </view>
        </view>

        <view class="draw-container" v-if="tabIndex == 0">
            <view class="manuscript">
                <view class="manuscript-container" v-if="file.filedata">
                    <image id="filedata" class="manuscript-img" :src="file.filedata" mode="aspectFit"></image>
                    <image src="@/static/images/icon_shanchu@2x.png" class="delete" @click="deleteFiledata('filedata')">
                    </image>
                </view>
                <view class="btn" v-if="!file.filedata" @click="selectedFileData('filedata')">
                    <view class="btn-content">
                        <image class="btn-icon" src="@/static/images/icon_xiangaotu@2x.png"></image>
                        <view class="btn-text">点击上传线稿图</view>
                    </view>
                    <view class="btn-tip">推荐上传:手绘图/SU/毛坯图/3D白膜图/拍照图</view>
                </view>
            </view>

            <view class="model">
                <view class="title">
                    <image src="@/static/images/icon_xuanzemoxing@2x.png" class="title-icon"></image>
                    <view class="tle">选择设计风格模型</view>
                </view>
                <view class="more">
                    <view class="model-name">{{ modelIndex >= 0 ? modelList[modelIndex]?.name : '未选择' }}</view>
                    <view class="more-btn" @click="moreModel">{{ modelIndex >= 0 ? "选择更多模型" : '选择模型' }}</view>
                </view>
                <div class="list">
                    <view class="item" :class="{ actived: modelIndex == i }" v-for="(item, i) in modelList.slice(0, 6)"
                        :key="item.id" @click="selectedModel(i)">
                        <image :src="item.cover" mode="aspectFill" class="img"></image>
                    </view>
                </div>
            </view>

            <view class="prompt-container">
                <view class="title">
                    <view class="tle">描述空间内容</view>
                    <uv-icon name="trash-fill" size="20" color="#fff" @click="clearPrompt"></uv-icon>
                </view>
                <textarea class="prompt" maxlength="-1" v-model="prompt" placeholder="请输入描述词" />

                <view class="prompt_onOff">
                    <view class="prompt-onOff-title">添加反向描述词</view>
                    <uv-switch v-model="negative_prompt_onOff" @change="changeRePrompt" inactive-color="#000"
                        active-color="#ff8a63" size="18"></uv-switch>
                </view>
                <textarea v-if="negative_prompt_onOff" maxlength="-1" class="negative_prompt" v-model="negative_prompt"
                    placeholder="请输入反向描述词" />
            </view>

            <view class="assemble">
                <view class="title">选择图片控制模式</view>
                <view class="assemble-container">
                    <view class="assemble-btn" :class="{ actived: assemble_index == i }" v-for="(item, i) in assemble"
                        :key="i" @click="assemble_index = i">{{ item.name }}</view>
                </view>
            </view>

            <view class="senior">
                <view class="senior_onOff">
                    <view class="senior-onOff-title">高阶设置</view>
                    <uv-switch v-model="senior_onOff" inactive-color="#000" active-color="#ff8a63"
                        size="18"></uv-switch>
                </view>

                <view class="progress" v-if="senior_onOff">
                    <view class="title">线稿参数</view>
                    <view class="slider-container">
                        <slider :value="control_weight" :showText='false' @change="changingWeight"
                            @changing="changingWeight" step="0.1" min="0.7" max="1.2" block-size="10"
                            block-color="white" backgroundColor="#333" activeColor="#FFCB30" />
                    </view>
                    <view class="slider-num">{{ control_weight }}</view>
                </view>

                <view class="progress" v-if="senior_onOff">
                    <view class="title">模型参数</view>
                    <view class="slider-container">
                        <slider :value="loraWeight" :showText='false' @change="changingLora" @changing="changingLora"
                            step="0.1" min="0" max="1" block-size="10" block-color="white" backgroundColor="#333"
                            activeColor="#FFCB30" />
                    </view>
                    <view class="slider-num">{{ loraWeight }}</view>
                </view>

                <view class="progress" v-if="senior_onOff">
                    <view class="title">风格参数</view>
                    <view class="slider-container">
                        <slider :value="sub_weight" :showText='false' @change="changingSubWeight"
                            @changing="changingSubWeight" step="0.1" min="0" max="1" block-size="10" block-color="white"
                            backgroundColor="#333" activeColor="#FFCB30" />
                    </view>
                    <view class="slider-num">{{ sub_weight }}</view>
                </view>

                <!-- 风格图 -->
                <view class="upload" v-if="senior_onOff">
                    <view class="manuscript-container" v-if="file.filedata1">
                        <!-- <image id="filedata" class="manuscript-img" :src="file.filedata" mode="aspectFill"
					:style="{width:scaledWidth+'px',height:scaledHeight+'px'}"></image> -->
                        <image id="filedata" class="manuscript-img" :src="file.filedata1" mode="aspectFill"></image>
                        <image src="@/static/images/icon_shanchu@2x.png" class="delete"
                            @click="deleteFiledata('filedata1')">
                        </image>
                    </view>
                    <view class="filedata1" @click="selectedFileData('filedata1')" v-if="!file.filedata1">
                        <view class="title">
                            <image src="@/static/images/icon_xuanzemoxing@2x.png" class="title-icon"></image>
                            <view class="tle">添加风格参考图</view>
                        </view>
                    </view>
                </view>

                <!-- 通道图 -->
                <view class="upload" v-if="senior_onOff">
                    <view class="manuscript-container" v-if="file.filedata2">
                        <!-- <image id="filedata" class="manuscript-img" :src="file.filedata" mode="aspectFill"
					:style="{width:scaledWidth+'px',height:scaledHeight+'px'}"></image> -->
                        <image id="filedata" class="manuscript-img" :src="file.filedata2" mode="aspectFill"></image>
                        <image src="@/static/images/icon_shanchu@2x.png" class="delete"
                            @click="deleteFiledata('filedata2')">
                        </image>
                    </view>
                    <view class="filedata2" @click="selectedFileData('filedata2')" v-if="!file.filedata2">
                        <view class="title">
                            <image src="@/static/images/icon_xuanzemoxing@2x.png" class="title-icon"></image>
                            <view class="tle">添加场景通道图(控制景深效果)</view>
                        </view>
                    </view>
                </view>

            </view>

            <!-- 控制器 -->
            <view class="controller">
                <view class="batch">
                    <view class="text">每次生成张数</view>
                    <view class="batch-container">
                        <view class="item" :class="{ actived: batch_index == i }" v-for="(item, i) in picBatch" :key="i"
                            @click="batch_index = i">
                            {{ item.name }}
                        </view>
                    </view>
                </view>
                <view class="work-btn-style btn" @click="getImg2Img">
                    <view class="btn-text">点击生成</view>
                    <view class="btn-price">（本次消耗{{ (cost * (picBatch[batch_index].value * 100)) / 100 }}点积分）</view>
                </view>
            </view>

        </view>

        <view class="local-container" v-if="tabIndex == 1">
            <view class="local-item" @click="clickItem">
                <view class="local-icon">
                    <image class="local-icon-img" src="@/static/images/icon_tumotihuan@2x.png" />
                </view>
                <view class="local-text">涂抹替换</view>
                <view class="local-img">
                    <image class="local-img-pictrue" src="@/static/images/tumotihuan.png" />
                </view>
            </view>
        </view>

        <!-- loading -->
        <uv-loading-page :loading="loading" :loadingText="loadingText" font-size="24rpx"
            bgColor="rgba(0,0,0,0.5)"></uv-loading-page>

        <PopupModelDetail type="list" :onOff="popupOnOff" @accept="acceptPopup" />
    </view>
</template>

<script setup>
import {
    onHide,
    onShow,
    onLoad
} from '@dcloudio/uni-app'
import {
    ref,
    watch
} from 'vue';

import {
    apiGetModelList,
    apiGetImg2Img,
    apiGetAssemble,
    apiGetControlnet,
    apiGetPrompt,
    apiGetWeight,
    BASE_URL
} from '@/api/defaultApi.js'
import {
    apiGetCostCheck
} from '@/api/accountApi.js'

// pinia
import {
    storeToRefs
} from 'pinia'
// pinia
import {
    useModelStore
} from "@/stores/useModelStores.js"
import {
    useUserStore
} from "@/stores/useUserStore.js"
import {
    useLoadingStore
} from "@/stores/useLoadingStore.js"


// 获取pinia的数据
const modelStore = useModelStore()
const userStore = useUserStore()
const loadingStore = useLoadingStore()

// 从pinia的数据中结构出值并做响应式
const {
    model
} = storeToRefs(modelStore)
const {
    token
} = storeToRefs(userStore)
const {
    loading
} = storeToRefs(loadingStore)


//  tab
const tab = [{
    name: '快速绘图'
}, {
    name: '局部重绘'
}]
// 登录方式
const tabIndex = ref(0)

// 上传的图片
const file = ref({
    filedata: '',
    filedata1: '',
    filedata2: '',
})

//模型列表
const modelList = ref([])
const modelIndex = ref(-1)

//描述空间内容（prompt）
const prompt = ref('')

//反向描述词开关
const negative_prompt_onOff = ref(false)
//反向描述词（negative_prompt）
const negative_prompt = ref('')

//图片控制模式（preProcessor）
const assemble = ref([])
const assemble_index = ref(0)


// 高级设置
const senior_onOff = ref(false) //开关
const control_weight = ref(0) //线稿参数
const loraWeight = ref(0) //模型参数
const sub_weight = ref(0) //风格参数
const control_mode = ref('')

// 重置生成的1024规格
const scaledWidth = ref(0)
const scaledHeight = ref(0)


// 控制器
//生成数量相关
const picBatch = ref([{
    name: 1,
    value: 1
},
{
    name: 2,
    value: 2
},
{
    name: 3,
    value: 3
},
{
    name: 4,
    value: 4
}
])
const batch_index = ref(0)
//消耗积分数量
const cost = ref(0)

const loadingText = ref('图片上传中...')
const popupOnOff = ref(false)



// 切换方式
const change = (i) => {
    tabIndex.value = i
}

// 获取模型列表
const getModelList = async () => {

    let item = model.value
    let res = await apiGetModelList({
        pageNo: 1,
        pageSize: 6
    }, '1697488857172619266')
    modelList.value = res.data.items

    if (Object.keys(item).length > 0) {
        let i = -1
        for (let [index, items] of modelList.value.entries()) {
            if (item.id == items.id) {
                i = index
                modelIndex.value = index
            }
        }
        if (i == -1) {
            modelIndex.value = 0
            modelList.value.unshift(item)
        }
    }
    getPrompt() //获取描述
    getWeight() //
    getAssemble() //图片控制模式
    getCostCheck() //查询费用
}

// 更多模型
const moreModel = () => {
    popupOnOff.value = true
}

// 选择模型
const selectedModel = (n) => {
    modelIndex.value = n
    getPrompt() //获取描述
    getWeight() //
    getAssemble() //图片控制模式
    getCostCheck() //查询费用
}

// 接收弹窗
const acceptPopup = () => {
    popupOnOff.value = false
    getModelList()
    getAssemble() //图片控制模式
    getCostCheck() //查询费用
}


//获取图片控制模式
const getAssemble = async () => {
    let res = await apiGetAssemble({
        type: 2,
        limit: 3
    })
    assemble.value = res.data
    getControlnet()
}

// 查询费用
const getCostCheck = async () => {
    let res = await apiGetCostCheck({
        kind: 1,
        mode: '无'
    })
    cost.value = res.data
}

//获取图片控制模式下的高阶设置默认值
const getControlnet = async () => {
    let res = await apiGetControlnet(assemble.value[assemble_index.value].id)
    control_mode.value = res.data.control_mode
    loraWeight.value = res.data.lora_weight
    control_weight.value = res.data.weight
    sub_weight.value = res.data.sub_weight
}

//获取模型描述词
const getPrompt = async () => {
    if (modelIndex.value == -1) return
    let res = await apiGetPrompt(modelList.value[modelIndex.value].id)
    prompt.value = res.data[0]
}

//清空描述内容
const clearPrompt = () => {
    prompt.value = ''
}

// 添加反向描述词
const changeRePrompt = (value) => {
    negative_prompt_onOff.value = value
    if (!value) {
        negative_prompt.value = ''
    }
}

//
const getWeight = async () => {
    if (modelIndex.value == -1) return
    let res = await apiGetWeight(modelList.value[modelIndex.value].id)
    loraWeight.value = res.data
}

//修改线稿参数
const changingWeight = (e) => {
    control_weight.value = Math.round(e.detail.value * 10) / 10
}

//修改模型参数
const changingLora = (e) => {
    loraWeight.value = Math.round(e.detail.value * 10) / 10
}

//修改风格参数

const changingSubWeight = (e) => {
    sub_weight.value = Math.round(e.detail.value * 10) / 10
}

//删除图
const deleteFiledata = (name) => {
    file.value[name] = ''
}
//选择图片
const selectedFileData = (name) => {

    // 判断是否已获得相册授权

    // #ifdef MP-WEIXIN

    uni.authorize({
        scope: 'scope.writePhotosAlbum',
        success() {
            uni.chooseMedia({
                count: 1, // 默认9
                mediaType: ['image'],
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    if (res.tempFiles[0].size > 10485760) {     //判断是否大于10M   单位是大写B
                        uni.showToast({
                            title: '图片大于10MB无法上传',
                            icon: 'none',
                            showCancel: false,
                            confirmColor: "#000"
                        })
                        return
                    }

                    let tempFileImg = ''

                    tempFileImg = res.tempFiles[0].tempFilePath
                    file.value[name] = tempFileImg


                    if (name == 'filedata') {
                        uni.getImageInfo({
                            src: tempFileImg,
                            success: function (res) {
                                let originalWidth = res.width;
                                let originalHeight = res.height;

                                // 确定缩放比例
                                let maxLength = 1024;
                                let scaleWidth = maxLength / originalWidth;
                                let scaleHeight = maxLength / originalHeight;
                                let scale = Math.min(scaleWidth, scaleHeight);

                                // 计算缩放后的尺寸
                                // let scaledWidth = originalWidth * scale;
                                // let scaledHeight = originalHeight * scale;
                                scaledWidth.value = originalWidth * scale;
                                scaledHeight.value = originalHeight * scale;

                            }
                        });
                    }
                },
                fail: function (err) {
                    uni.showToast({
                        title: "图片上传失败",
                        icon: "none",
                    })
                }
            })
        },
        fail() {
            // 未获得授权，提示用户前往设置页面授权
            uni.showModal({
                title: '提示',
                content: '您未授权访问相册，请前往设置页面授权',
                showCancel: false,
                success: function (res) {
                    if (res.confirm) {
                        // 跳转到应用设置页面
                        uni.openSetting({
                            success: function (res) {
                                if (res.authSetting['scope.writePhotosAlbum']) {
                                    // 用户已开启授权，可以再次尝试选择图片
                                    uni.chooseMedia({
                                        count: 1,
                                        sourceType: ['album', 'camera'],
                                        success: function (res) {
                                            if (res.tempFiles[0].size > 10485760) {     //判断是否大于10M   单位是大写B
                                                uni.showToast({
                                                    title: '图片大于10MB无法上传',
                                                    icon: 'none',
                                                    showCancel: false,
                                                    confirmColor: "#000"
                                                })
                                                return
                                            }
                                            const tempFilePaths = res
                                                .tempFilePaths
                                            file.value[name] =
                                                tempFilePaths[0]

                                            if (name == 'filedata') {
                                                uni.getImageInfo({
                                                    src: res
                                                        .tempFilePaths[
                                                        0],
                                                    success: function (
                                                        res
                                                    ) {
                                                        let originalWidth =
                                                            res
                                                                .width;
                                                        let originalHeight =
                                                            res
                                                                .height;

                                                        // 确定缩放比例
                                                        let maxLength =
                                                            1024;
                                                        let scaleWidth =
                                                            maxLength /
                                                            originalWidth;
                                                        let scaleHeight =
                                                            maxLength /
                                                            originalHeight;
                                                        let scale =
                                                            Math
                                                                .min(
                                                                    scaleWidth,
                                                                    scaleHeight
                                                                );

                                                        // 计算缩放后的尺寸
                                                        // let scaledWidth = originalWidth * scale;
                                                        // let scaledHeight = originalHeight * scale;
                                                        scaledWidth
                                                            .value =
                                                            originalWidth *
                                                            scale;
                                                        scaledHeight
                                                            .value =
                                                            originalHeight *
                                                            scale;

                                                    }
                                                });
                                            }
                                        }
                                    });
                                }
                            }
                        });
                    }
                }
            });
        }
    });


    // #endif


    // #ifdef H5
    uni.chooseImage({
        count: 1, // 默认9
        sourceType: ['camera', 'album'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
            if (res.tempFiles[0].size > 10485760) {     //判断是否大于10M   单位是大写B
                uni.showToast({
                    title: '图片大于10MB无法上传',
                    icon: 'none',
                    showCancel: false,
                    confirmColor: "#000"
                })
                return
            }
            let tempFileImg = ''

            tempFileImg = res.tempFilePaths[0]
            file.value[name] = tempFileImg

            if (name == 'filedata') {

                uni.getImageInfo({
                    src: tempFileImg,
                    success: function (res) {
                        let originalWidth = res.width;
                        let originalHeight = res.height;

                        // 确定缩放比例
                        let maxLength = 1024;
                        let scaleWidth = maxLength / originalWidth;
                        let scaleHeight = maxLength / originalHeight;
                        let scale = Math.min(scaleWidth, scaleHeight);

                        // 计算缩放后的尺寸
                        // let scaledWidth = originalWidth * scale;
                        // let scaledHeight = originalHeight * scale;
                        scaledWidth.value = originalWidth * scale;
                        scaledHeight.value = originalHeight * scale;

                    }
                });
            }
        },
        fail: function (err) {
            uni.showToast({
                title: "图片上传失败",
                icon: "none",
            })
        }
    })
    // #endif

}


// 发起生图任务
const getImg2Img = async () => {

    if (!file.value.filedata) {

        uni.showModal({
            title: '提示',
            content: '请上传参考图进行生成！',
            showCancel: false
        })
        return
    }

    if (modelIndex.value < 0 || !modelList.value[modelIndex.value].id) {
        uni.showModal({
            title: '提示',
            content: '请选择风格模型进行创作',
            showCancel: false
        })
        return
    }
    let params = {
        // 生成图数量
        picBatch: picBatch.value[batch_index.value].value,
        //描述词
        prompt: prompt.value,
        // 反向描述词
        negative_prompt: negative_prompt.value,
        //控制模式
        preProcessor: assemble.value[assemble_index.value].id,
        //线稿参数
        control_weight: control_weight.value,
        //模型参数
        loraWeight: loraWeight.value,
        //按比例生成的长边1024规格
        picRate: parseInt(scaledWidth.value) + '*' + parseInt(scaledHeight.value),
        control_mode: control_mode.value,

        style: modelList.value[modelIndex.value].id
    }
    loadingText.value = '任务提交中...'
    loadingStore.setLoading(true)

    uni.uploadFile({
        url: BASE_URL + '/img2img', //仅为示例，非真实的接口地址
        filePath: file.value.filedata,
        name: 'filedata',
        header: {
            Authorization: 'bearer ' + token.value,
        },
        formData: {
            'filedata': file.value.filedata,
            'filedata1': file.value.filedata1,
            'filedata2': file.value.filedata2,
            'paramStr': JSON.stringify(params)
        },
        success(res) {

            const data = JSON.parse(res.data)

            if (res.statusCode === 401) {
                uni.showToast({
                    title: "请登录后进行操作",
                    icon: "none",
                    success: () => {
                        setTimeout(() => {
                            uni.navigateTo({
                                url: '/pages/login/login'
                            })
                        }, 500)
                    }
                })
                return
            }
            if (res.statusCode === 500) {
                uni.showToast({
                    title: data.msg,
                    icon: "none",
                    showCancel: false,
                    confirmColor: '#000',
                    duration: 3000
                })
                setTimeout(() => {
                    loadingStore.setLoading(false)
                }, 3000)
                return
            }

            loadingStore.setLoading(false)

            let form = {
                'filedata': file.value.filedata,
                'filedata1': file.value.filedata1,
                'filedata2': file.value.filedata2,
                'paramStr': JSON.stringify(params),
                'cost': cost.value
            }

            if (data.code === 0) {
                uni.navigateTo({
                    url: '/pages/drawInfo/drawInfo?id=' + data.data + '&formData=' + JSON
                        .stringify(form)
                })
            } else {
                uni.showModal({
                    title: "错误提示",
                    content: data.msg,
                    showCancel: false,
                    confirmColor: '#000'
                })
            }
        }
    })
}

const clickItem = () => {
    uni.showModal({
        title:"提示",
        content:'功能开发中',
        icon:'none'
    })
}

watch(assemble_index, (newValue, oldValue) => {
    getControlnet()
})

watch(modelIndex, (newValue, oldValue) => {
    modelStore.setModel({})
    modelStore.setModel(modelList.value[modelIndex.value])
})

onHide(() => {
    // modelStore.setModel({})
    loadingStore.setLoading(false)
})

onShow(() => {
    change(0)
    getModelList()
})

onLoad(() => {
    // getModelList()
})

</script>

<style lang="scss" scoped>
.page {
    padding-bottom: 186rpx;
}

.tab {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin: 8rpx auto 40rpx;

    .item {
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;

        &.actived {
            color: #FFCB30;
        }

        .title {
            height: 28rpx;
            line-height: 28rpx;
            font-size: 30rpx;
            margin-bottom: 16rpx;
        }

        .gap {
            height: 8rpx;
            background: #ffcb30;
            border-radius: 4rpx;
            width: 88rpx;
        }
    }
}

.draw-container {
    .manuscript {
        .manuscript-container {
            width: 100%;
            height: 386rpx;
            border-radius: 20rpx;
            overflow: hidden;
            position: relative;
            border: 2rpx solid #ececec;
            padding: 2rpx;
            box-sizing: border-box;

            .manuscript-img {
                width: 100%;
                height: 100%;
            }

            .delete {
                width: 48rpx;
                height: 48rpx;
                position: absolute;
                right: 24rpx;
                bottom: 24rpx;
            }
        }

        .btn {
            width: 100%;
            height: 142rpx;
            background: linear-gradient(65deg, #ff8a63 0%, #ffde7d 100%), #3bac72;
            border-radius: 20rpx;
            font-size: 30rpx;
            font-weight: 500;
            color: #000000;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            flex-direction: column;

            .btn-content {
                flex-direction: row;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;

                .btn-icon {
                    width: 40rpx;
                    height: 30rpx;
                    margin-right: 10rpx;
                }

                .uv-upload {
                    position: absolute;
                    top: 0;
                    left: 0;
                    opacity: 0;
                }
            }

            .btn-tip {
                font-size: 24rpx;
                color: #666666;
            }

        }
    }

    .model {
        width: 100%;
        background: #191919;
        border-radius: 20rpx;
        margin: 20rpx auto;
        overflow: hidden;
        padding: 24rpx;
        box-sizing: border-box;

        .title {
            height: 24rpx;
            line-height: 24rpx;
            display: flex;

            .title-icon {
                width: 30rpx;
                height: 20rpx;
                margin-right: 7rpx;
            }

            .tle {
                font-size: 24rpx;
                color: #fff;
                font-weight: 500;
            }
        }

        .more {
            width: 100%;
            height: 56rpx;
            font-size: 24rpx;
            display: flex;
            justify-content: space-between;
            margin-top: 16rpx;
            line-height: 56rpx;
            font-weight: bold;

            .model-name {
                width: 420rpx;
                height: 100%;
                background: #333333;
                border-radius: 10rpx;
                color: #ffffff;
                text-align: center;
            }

            .more-btn {
                width: 202rpx;
                height: 100%;
                background: #ffcb30;
                border-radius: 10rpx;
                color: #000000;
                text-align: center;
            }
        }

        .list {
            width: 100%;
            height: 336rpx;
            display: flex;
            flex-wrap: wrap;
            overflow: hidden;

            .item {
                width: 202rpx;
                height: 152rpx;
                background: #b3b3b3;
                border-radius: 10rpx;
                overflow: hidden;
                margin-top: 16rpx;
                margin-right: 16rpx;
                overflow: hidden;
                border: 4rpx solid #191919;

                &.actived {
                    border: 4rpx solid #ffcb30;
                }

                &:nth-child(3n) {
                    margin-right: 0;
                }

                .img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    .prompt-container {
        width: 686rpx;
        height: auto;
        background: #191919;
        border-radius: 20rpx;
        overflow: hidden;
        padding: 24rpx;
        box-sizing: border-box;

        .title {
            height: 24rpx;
            margin-bottom: 16rpx;
            display: flex;
            justify-content: space-between;

            .tle {
                color: #ffffff;
                line-height: 24rpx;
                font-size: 24rpx;
                font-weight: 500;
            }
        }

        .prompt,
        .negative_prompt {
            width: 638rpx;
            height: 160rpx;
            background: #4d4d4d;
            border-radius: 10rpx;
            margin: 0 auto;
            overflow: hidden;
            padding: 16rpx;
            box-sizing: border-box;
            font-size: 20rpx;
            font-weight: 400;
            color: #fff;
        }

        .negative_prompt {
            margin-top: 16rpx;
        }

        .prompt_onOff {
            height: 40rpx;
            align-items: center;
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin: 12rpx auto 0;
        }

        .prompt-onOff-title {
            font-size: 20rpx;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            font-weight: 400;
            text-align: center;
            color: #ffffff;
            line-height: 51rpx;
        }
    }

    .assemble {
        width: 100%;
        height: auto;
        background: #191919;
        border-radius: 20rpx;
        padding: 24rpx;
        box-sizing: border-box;
        overflow: hidden;
        margin: 20px 0;

        .title {
            height: 24rpx;
            font-size: 24rpx;
            font-weight: 500;
            text-align: left;
            color: #ffffff;
            line-height: 24rpx;
        }

        .assemble-container {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .assemble-btn {
                width: 311rpx;
                height: 48rpx;
                border-radius: 15rpx;
                text-align: center;
                line-height: 48rpx;
                font-weight: 500;
                font-size: 20rpx;
                background: #333333;
                color: #999;
                margin-top: 16rpx;

                &.actived {
                    background: #ffffff;
                    color: #000000;
                }
            }
        }
    }

    .senior {
        width: 100%;
        height: auto;
        background: #191919;
        border-radius: 20rpx;
        overflow: hidden;
        padding: 24rpx;
        box-sizing: border-box;

        .senior_onOff {
            height: 40rpx;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .senior-onOff-title {
            font-size: 20rpx;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            font-weight: 400;
            text-align: center;
            color: #ffffff;
        }

        .progress {
            width: 100%;
            height: 40rpx;
            display: flex;
            margin-top: 16rpx;
            align-items: center;

            .title {
                font-size: 24rpx;
                color: #fff;
                font-weight: 400;
            }

            .slider-container {
                height: 100%;
                margin-left: 40rpx;
                width: 406rpx;

                &:deep(uni-slider) {
                    margin: 0;

                    .uni-slider-tap-area {
                        padding: 0;

                        .uni-slider-handle-wrapper {
                            height: 8rpx;
                        }
                    }

                    .uni-slider-value {
                        margin-left: 40rpx;
                        width: 64rpx;
                        height: 40rpx;
                        background: #000;
                        border: 1rpx solid #4d4d4d;
                        border-radius: 15rpx;
                        color: #666;
                        font-size: 22rpx;
                        font-weight: 400;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }

            .slider-num {
                width: 64rpx;
                height: 40rpx;
                background: #000000;
                border: 1rpx solid #4d4d4d;
                border-radius: 10rpx;
                overflow: hidden;
                font-size: 20rpx;
                font-weight: 500;
                color: #ffffff;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 30rpx;
            }
        }
    }

    .upload {
        margin-top: 20rpx;

        .manuscript-container {
            width: 100%;
            height: 386rpx;
            border-radius: 20rpx;
            overflow: hidden;
            position: relative;
            border: 2rpx solid #ececec;
            padding: 2rpx;
            box-sizing: border-box;

            .manuscript-img {
                width: 100%;
                height: 100%;
            }

            .delete {
                width: 48rpx;
                height: 48rpx;
                position: absolute;
                right: 24rpx;
                bottom: 24rpx;
            }
        }

        .filedata1,
        .filedata2 {
            width: 100%;
            height: 180rpx;
            background: #4d4d4d;
            border-radius: 20rpx;
            overflow: hidden;
            position: relative;

            .title {
                height: 40rpx;
                background: #000000;
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;

                .title-icon {
                    width: 16rpx;
                    height: 16rpx;
                    margin-right: 10rpx;
                }

                .tle {
                    font-weight: 500;
                    font-size: 20rpx;
                    color: #fff;
                }
            }
        }

    }

    .controller {
        height: 186rpx;
        width: 100%;
        background: #000;
        position: fixed;
        bottom: var(--window-bottom);
        left: 0;
        padding: 0 32rpx;
        box-sizing: border-box;
        z-index: 9;

        .batch {
            height: 40rpx;
            margin: 24rpx auto;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .text {
                font-size: 24rpx;
                font-weight: 500;
                color: #ffffff;
            }

            .batch-container {
                display: flex;

                .item {
                    width: 112rpx;
                    height: 40rpx;
                    line-height: 40rpx;
                    background: #333333;
                    border-radius: 20rpx;
                    font-size: 24rpx;
                    font-weight: 500;
                    text-align: center;
                    color: #999999;
                    margin-left: 16rpx;

                    &.actived {
                        background: #ffffff;
                        color: #000;
                    }
                }
            }
        }

        .btn {
            width: 100%;
            height: 78rpx;
            border-radius: 39rpx;
            color: #080808;
            align-items: flex-end;

            .btn-text {
                font-size: 30rpx;
                font-weight: 700;
                line-height: 78rpx;
            }

            .btn-tip {
                font-size: 24rpx;
                color: #c6c6c6;
                width: 100%;
            }

            .btn-price {
                font-weight: 500;
                font-size: 18rpx;
                line-height: 60rpx;
                letter-spacing: 2.8rpx;
            }
        }
    }
}

.local-container {
    padding-top: 32rpx;

    .local-item {
        width: 686rpx;
        height: 256rpx;
        background: #e6e6e6;
        border-radius: 20rpx;
        margin: 0 auto 20rpx;
        display: flex;
        flex-direction: row;
        align-items: center;

        &::v-deep .navigator-wrap {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .local-icon {
            width: 104rpx;
            height: 104rpx;
            background: #ffffff;
            border-radius: 50%;
            margin-left: 52rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            .local-icon-img {
                width: 56rpx;
                height: 44rpx;
            }
        }

        .local-text {
            font-weight: 700;
            color: #000000;
            font-size: 40rpx;
            margin: 0 52rpx 0 16rpx;
        }

        .local-img {
            width: 278rpx;
            height: 208rpx;
            background: #c7c7c7;
            border-radius: 10rpx;
            overflow: hidden;

            .local-img-pictrue {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>